<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML>
<html>
<head>
    <base href="${ctx }/">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="plugin/bootstrap-table/dist/bootstrap-table.css">
    <!-- <link rel="stylesheet" href="css/zoom.css" media="all" />  -->
    <link rel="stylesheet" href="alert/alert.css">
</head>
<body>
<div class="container-fluid">
    <div class="container row" id="query">
        <div>
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home home-icon"></i>
                    <a href="javascript:void(0)">Finance Management(财务管理)</a>
                </li>
                <li class="active">
                    <a href="view/report/driverMonthlyIncomeList.jsp">Driver Income Statement(司机收入报表)</a>
                </li>
            </ul>
        </div>
        <div>
            <div class="form-inline" role="form" method="post" id="queryForm">
                <div class="form-group">
                    <select id="year" name="year" class="form-control">
                        <option>2015</option>
                        <option>2016</option>
                        <option>2017</option>
                        <option>2018</option>
                        <option>2019</option>
                        <option>2020</option>
                    </select> <span>Year</span>
                    <select id="mouth"  name="mouth"class="form-control">
                        <option>01</option>
                        <option>02</option>
                        <option>03</option>
                        <option>04</option>
                        <option>05</option>
                        <option>06</option>
                        <option>07</option>
                        <option>08</option>
                        <option>09</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                    </select> <span>Month</span>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="queryBtn" onclick="doQuery1('demo-table',queryParams1())" class="btn btn-primary">Search
                </button>
            </div>
        </div>
        <br>
    </div>
    <table id="demo-table"></table>
</div>
</body>

<!-- 加载需要的js -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="js/jquery-bootstrap-pagination.js"></script>
<script src="plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript" charset="utf-8">

    $(function () {
        initPath("${ctx }");
        initTable('demo-table', queryParams, columns, "finance/month/orders");
        var myDate = new Date();
        var fullYear= myDate.getFullYear();  
        var month=myDate.getMonth();
        $('#year').val(fullYear);
        month= month+1;
       if(month<10){
     	  month="0"+month;
       }
       $('#mouth').val(month);
    });

    var columns = [{field: '', title: 'Choose', checkbox: true},
        {
            field: 'month',
            title: 'month(月)',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
            	var val=value.split("-");
            	var year=val[0]+" Year "+val[1]+" Month ";
                return year;
            }
        },
        {
            field: 'driverName',
            title: 'Driver Name(司机名称)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'telephone',
            title: 'Driver Phone(司机电话)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'turnover',
            title: 'Total Revenue(营业总额)',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                var turnover =row.turnover;
                var roadPrice =row.roadPrice;
                var cleanness =row.cleanness;
                var tip =row.tip;
               var total= parseFloat(turnover)+parseFloat(roadPrice)+parseFloat(cleanness)+parseFloat(tip); 
                  return total;
              }
        },
        {
            field: 'contributionAmount',
            title: 'fab Commissions(平台收取)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'turnover',
            title: 'Driver Payout(司机结算)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'roadPrice',
            title: 'Toll(过路费)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'cleanness',
            title: 'Cleaning Fees(清洁费)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'tip',
            title: 'Tips(小费)',
            align: 'center',
            valign: 'middle'
        }];

    function queryParams(params) {
//        console.log(params);
        var param = {
        		mou: $('#mouth').val(),
        		year: $('#year').val(),
	            pageNo: this.pageNumber,
	            pageSize: this.pageSize
        }
        return param;
    }

    function queryParams1() {
        var param = {
        		mou: $('#mouth').val(),
        		year: $('#year').val(),
	            pageNo: 1,
	            pageSize: this.pageSize
        }
        return param;
    }

</script>
</html>


